import React, { useState } from 'react';
import {Button, Icon, Modal, Table, TableProps, Empty, Form, Select, Checkbox, Input} from 'antd';
type LayoutType = Parameters<typeof Form>[0]['layout'];
const { TextArea } = Input;
const App = (props) => {
  const [open, setOpen] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [form] = Form.useForm();
  const [formLayout, setFormLayout] = useState<LayoutType>('inline');
  const showModal = () => {
    setOpen(true);
  };

  const handleOk = () => {
    setConfirmLoading(true);
    setTimeout(() => {
      setOpen(false);
      setConfirmLoading(false);
    }, 2000);
  };

  const handleCancel = () => {
    setOpen(false);
  };

  React.useImperativeHandle(props.onRef, () => {
    return {
      showModal: showModal,
    };
  });
  return (
    <>
      <Modal
        title="样本拒签"
        open={open}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
        width={1200}
      >
        <Form
          layout={formLayout}
          form={form}
          initialValues={{ layout: formLayout }}
          style={{ maxWidth: formLayout === 'inline' ? 'none' : 600 }}
        >

          <Form.Item style={{marginBottom: '6px'}} label="条码扫描">
            <Input placeholder="请输入条码扫描" />
          </Form.Item>
          <Form.Item style={{marginBottom: '6px'}} label="接收人">
            <Input placeholder="请输入接收人" />
          </Form.Item>
          <Form.Item style={{marginBottom: '6px'}} label="通知电话">
            <Input placeholder="请输入通知电话" />
          </Form.Item>
        </Form>
        <div style={{height: '120px'}}>
          拒签理由：
        </div>
        <div>
          备注
          <TextArea rows={4} />
        </div>
      </Modal>
    </>
  );
};

export default App;
